<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工请假申请</title>
    <script src="../../../../../res/js/jquery-3.4.1.min.js" charset="utf-8"></script>
    <script src="../../../../../res/js/login_common.js" charset="utf-8"></script>
    <script src="../../../../../res/layui/layui.js" charset="utf-8"></script>
    <script src="../../../../../res/js/Tools.js" charset="utf-8"></script>
    <link rel="shortcut icon" type="image/x-icon" href="../../../../../res/images/favicon.ico">
    <link rel="stylesheet" href="../../../../../res/layui/css/layui.css" media="all">
</head>
<body style="padding: 10px">
<div style="display: none" id="bodys">
    <form action="" class="layui-form layui-form-pane" lay-filter="example">
        <h1 align="center" style="margin-bottom: 20px">员工请假表</h1>
        <!--流程id-->
        <input name="pkVacateId" id="pkVacateId" type="hidden"/>
        <!--流程进度-->
        <input name="isRevision" id="isRevision" type="hidden"/>
        <!--员工id-->
        <input name="personnelId" id="personnelId" type="hidden"/>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-inline">
                    <input autocomplete="off" class="layui-input" lay-verify="required" name="personnelName"
                           id="personnelName" placeholder="请输入名字（必填）" disabled=""
                           type="text"/>
                </div>
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">部门</label>
                <div class="layui-input-inline">
                    <input autocomplete="off" class="layui-input" lay-verify="required" id="departmentName"
                           name="departmentName" placeholder="请输入部门（必填）" disabled=""
                           type="text"/>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">岗位</label>
                <div class="layui-input-inline">
                    <input autocomplete="off" class="layui-input" lay-verify="required" id="postName"
                           name="postName" placeholder="请输入岗位（必填）" disabled=""
                           type="text"/>
                </div>
            </div>
        </div>

        <div class="layui-form-item" pane="">
            <label class="layui-form-label">请假类别</label>
            <div class="layui-input-block" >
                <div id="vacateType1"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">请假时段</label>
                <div class="layui-input-inline" style="width: 400px">
                    <input type="text" class="layui-input" id="test10" name="test10" placeholder=" - ">
                </div>
                <label class="layui-form-label" style="width: 120px">加班工时合计</label>
                <div class="layui-input-inline">
                    <input autocomplete="off" class="layui-input" id="vacateHour" name="vacateHour" placeholder="天"
                           disabled="" type="text"/>
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">请假事由</label>
            <div class="layui-input-block">
                <textarea id="vacateCause" name="vacateCause" autocomplete="off"
                          placeholder="请输入请假原因" class="layui-textarea">    </textarea>
            </div>
        </div>
        <div class="layui-form-item layui-form-text" id="department" style="display: none">
            <label class="layui-form-label">员工所在部门审核意见：</label>
            <div class="layui-input-block">
            <textarea placeholder="请输入内容" class="layui-textarea" name="departmentOpinion" id="departmentOpinion" required>       </textarea>
            </div>
        </div>

        <div class="layui-form-item layui-form-text" id="staffing" style="display: none">
            <label class="layui-form-label">人事部审核意见：</label>
            <div class="layui-input-block">
            <textarea class="layui-textarea" name="personnelOpinion" id="personnelOpinion">  </textarea>
            </div>
        </div>
        <div class="layui-form-item layui-form-text" id="manger" style="display: none">
            <label class="layui-form-label">总经理审核意见：</label>
            <div class="layui-input-block">
                <textarea placeholder="        请输入内容" class="layui-textarea" name="managerOpinion" id="managerOpinion">  </textarea>
            </div>
        </div>
        <!-- 提交-->
        <div class="layui-form-item" id="sub">
            <div class="layui-input-block" id="flowTwo">
                <button type="submit" class="layui-btn site-demo-active" lay-submit="" lay-filter="demo1">通过</button>
                <input type="button" id="demo3" class="layui-btn layui-btn-primary site-demo-active" value="不通过"/>
            </div>
        </div>
    </form>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>流程日志</legend>
    </fieldset>
    <ul class="layui-timeline" id="schedule">

    </ul>
</div>
<script>
    let pkVacateId = getQueryString("pkVacateId");
    let isRevision;
    layui.use(['form', 'laydate', 'table'], function () {
        var table = layui.table
            , form = layui.form
            , layer = layui.layer
            , laydate = layui.laydate;
        let res;
        if (pkVacateId) {
            $("#pkVacateId").val(pkVacateId);
            //查询员工转正流程
            res = getAjaxById(getRootPath() + "OaVacte/findById/" + pkVacateId);
            console.log(res);
            $("#isRevision").val(res.isRevision);
            //  D 为部门审核 R 为人事填写 G 为总经理审核
            if(res.isRevision === "D"){
                //调用D的方法
                departmentNode(res);
             /*   $("#demo3").hide();*/
            }else if(res.isRevision === "R"){
                //这里面调用R的方法 R的方法里面调用了D的方法
                staffingNode(res);
            }else if(res.isRevision === "G"){
                // 这里调用G的方法 G的方法里面调用了R的方法
                auditStaffingNode(res)
            }else if(res.isRevision === "E"){
                //全部审核完毕禁用所有控件 查看页面
                isShow(res);
            }

            //通过人员id查询申请人信息
           let ress = getAjaxById(getRootPath() + "OaPersonnelAction/findById/" + res.personnelId);
            // 员工名称
            $("#personnelName").val(ress.data.personnelName);
            // 员工id
            $("#personnelId").val(ress.data.pkPersonnelId);
            // 部门
            $("#departmentName").val(ress.data.departmentName);
            // 岗位
            $("#postName").val(ress.data.postName);
            form.render();
        }


        //监听起草提交
        form.on('submit(demo1)', function (data) {
            if (isRevision === "D") {
                data= {
                    departmentOpinion: $("#departmentOpinion").val(),
                    pkVacateId: pkVacateId
                };
            } else if (isRevision === "R") {
                data = {
                    personnelOpinion: $("#personnelOpinion").val(),
                    pkVacateId: pkVacateId
                };
            }else if(isRevision=== "G"){
                data = {
                    managerOpinion: $("#managerOpinion").val(),
                    pkVacateId: pkVacateId
                };
            }
            console.log(data.field);
            // 单击之后提交按钮不可选,防止重复提交
            const DISABLED = 'layui-btn-disabled';
            let site_demo_active=$('.site-demo-active');
            // 增加样式
            site_demo_active.addClass(DISABLED);
            // 增加属性
            site_demo_active.attr('disabled', 'disabled');
            let url="OaVacte/departmentPass";
            if(isRevision === "R"){
                url="OaVacte/adminPass";
            }else if(isRevision === "G"){
                url="OaVacte/managerPass";
            }
            const res = postAjax(getRootPath() + url, data);
            console.log(res);
            if (res === 1) {
                layer.msg('新增成功3秒后关闭当前窗口', {icon: 1});
                setTimeout(function () {
                    formClose();
                }, 3000);
                setTimeout(function () {
                    parent.layui.table.reload('test');//刷新父页面
                    //window.parent.location.reload();//刷新父页面
                    const index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                    parent.layer.close(index);
                }, 3000);
                //window.location.reload();//刷新页面
            } else if (res === 500) {
                error('500');
            } else {
                layer.msg("新增失败");
            }
            return false;
        });

        //监听审核提交不通过
        $('#demo3').on('click', function () {
            //prompt层
            layer.prompt({
                formType: 2,
                value: '',
                title: '请输入不通过原因',
                area: ['300px', '100px']
            }, function (text, index) {
                layer.close(index);
                let datas = {
                    formReason: text,
                    pkVacateId: $("#pkVacateId").val(),
                };
                // 单击之后提交按钮不可选,防止重复提交
                const DISABLED = 'layui-btn-disabled';
                let site_demo_active=$('.site-demo-active');
                // 增加样式
                site_demo_active.addClass(DISABLED);
                // 增加属性
                site_demo_active.attr('disabled', 'disabled');

                let url="OaVacte/departmentNoPass";
                if($("#isRevision").val() === "R"){
                    url="OaVacte/adminNoPass";
                }else if ($("#isRevision").val() === "G"){
                    url="OaVacte/managerNoPass";
                }
                /*layer.msg('您最后写下了：'+text);*/
                const res = postAjax(getRootPath() + url, datas);

                if (res === 1) {
                    layer.msg('提交成功3秒后关闭当前窗口', {icon: 1});
                    setTimeout(function () {
                        formClose();
                    },3000);
                    setTimeout(function () {
                        parent.layui.table.reload('test');//刷新父页面
                        //window.parent.location.reload();//刷新父页面
                        const index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                        parent.layer.close(index);
                    },3001);
                } else if (res=== 500) {
                    error('500');
                } else {
                    layer.msg("新增失败");
                }
            });

            return false;
        });

        if(pkVacateId){
            const ress = getAjaxById(getRootPath() + "OaFlowAction/selectFlowSchedule/" + $("#pkVacateId").val());
            $("#schedule").html("");
            $.each(ress, function (index, item) {
                if (item.createdBy) {
                    $("#schedule").append('<li class="layui-timeline-item">\n' +
                        '        <i class="layui-icon layui-timeline-axis"></i>\n' +
                        '        <div class="layui-timeline-content layui-text">\n' +
                        '            <h3 class="layui-timeline-title">' + dateFormat('yyyy-MM-dd hh:mm:ss', new Date(item.createdTime)) + '&nbsp;&nbsp;&nbsp;' + item.flowName + '</h3>\n' +
                        '            <p>' + item.formReason + '</p>\n' +
                        '            <p>操作人：' + item.createdBy + '</p>\n' +
                        '        </div>\n' +
                        '    </li>')
                } else {
                    $("#schedule").append('<li class="layui-timeline-item">\n' +
                        '        <i class="layui-icon layui-timeline-axis"></ i>\n' +
                        '        <div class="layui-timeline-content layui-text">\n' +
                        '            <h3 class="layui-timeline-title">' + dateFormat('yyyy-MM-dd hh:mm:ss', new Date(item.createdTime)) + '&nbsp;&nbsp;&nbsp;' + item.flowName + '</h3>\n' +
                        '            <p>' + item.formReason + '</p>\n' +
                        '        </div>\n' +
                        '    </li>')
                }
            });
        }

        $("#bodys").show();
        form.render();
    });



    /**
     * 部门审核
     */
    function departmentNode(data) {
        let res=getAjaxById(getRootPath()+"OaPersonnelAction/findById/"+data.personnelId);
        // 人员名称
        let personnelName=$("#personnelName");
        personnelName.val(res.data.personnelName);
        formDisabled(personnelName);
        // 部门
        let departmentName=$("#departmentName");
        departmentName.val(res.data.departmentName);
        formDisabled(departmentName);
        // 岗位
        let postName=$("#postName");
        postName.val(res.data.postName);
        formDisabled(postName);

        let vacateCause=$("#vacateCause");
        vacateCause.val(data.vacateCause);
        formDisabled(vacateCause);

        //查询请假类别
        const nation = getAjaxById(getRootPath() + "OaDataDictionaryAction/findKeyword/VACATETYPE");
        $.each(nation, function (index, item) {
            if(data.vacateType===item.pkDataDictionaryId){
                $("#vacateType1").append('<input type="radio" id="vacateType'+item.pkDataDictionaryId +'" name="vacateType" disabled value=" ' + item.pkDataDictionaryId + ' " title="'+item.dataDictionaryName+'" checked>');
            }else{
                $("#vacateType1").append('<input type="radio" id="vacateType'+item.pkDataDictionaryId +'" name="vacateType" disabled value=" ' + item.pkDataDictionaryId + ' " title="'+item.dataDictionaryName+'">');
            }
        });
        isRevision = data.isRevision;

            let test10= $("#test10");
            /*将时间拼接成yyy年-MM月-dd日 hh时 yyyy年-MM月-dd日 hh时--*/
            let sdate=dateFormat('yyyy年-MM月-dd日 hh时', new Date(data.vacateStart));
            let edate=dateFormat('yyyy年-MM月-dd日 hh时', new Date(data.vacateEnd));
            let date=sdate+' - '+edate;
            test10.val(date);
            formDisabled(test10);

            let vacateHour=$("#vacateHour");
            vacateHour.val(data.vacateHour);
            formDisabled(vacateHour);


        let department=$("#department");
        $("#department textarea").attr("lay-verify","required");
        department.show();
    }

    /**
     * 禁用
     *  @param forms 控件
     */
    function formDisabled(forms) {
        const DISABLED = 'layui-btn-disabled';
        forms.attr('disabled', 'disabled');
        forms.addClass(DISABLED);
    }

    /**
     * 行政人事填写
     * @param data 流程模型
     */
    function staffingNode(data) {
        departmentNode(data);
        // 部门意见
        let departmentOpinion=$("#departmentOpinion");
        departmentOpinion.val(data.departmentOpinion);
        formDisabled(departmentOpinion);
        //人事填写
        let staffing=$("#staffing");
        $("#staffing textarea").attr("lay-verify","required");
        staffing.show();
    }

    /**
     * 总经理审核
     * @param data 流程模型
     */
    function auditStaffingNode(data) {
        staffingNode(data);
        // 人事意见
        let personnelOpinion=$("#personnelOpinion");
        personnelOpinion.val(data.personnelOpinion);
        formDisabled(personnelOpinion);
        let manger=$("#manger");
        $("#manger textarea").attr("lay-verify","required");
        manger.show();
    }

    /**
     * 查看页面
     * @param data 流程模型
     */
    function isShow(data) {
        auditStaffingNode(data);
        // 部门意见
        let managerOpinion=$("#managerOpinion");
        managerOpinion.val(data.managerOpinion);
        formDisabled(managerOpinion);
        $("#sub").remove();
    }
</script>
</body>
</html>